<!DOCTYPE html>
<html>
<head>
    <title>01.01 - WebGLRenderer - Skeleton</title>
    <script src="./libs/three.js"></script>
    <script src="./libs/dat.gui.min.js"></script>
    <script src="../libs/TrackballControls.js"></script>
    <style>
    body{
        margin:0;
        padding:0;
        overflow: hidden;
    }
    #canvas3d{
        width:100%;
        height:100%;
    }
    </style>
</head>
<body>
    <div id="canvas3d">
    </div>
<script>

    // global variables
    var renderer;
    var scene;
    var camera;
    var light;
    var control;
    var pivotPoint;
    var camControl;

    function init() {
        // create a scene, that will hold all our elements such as objects, cameras and lights.
        scene = new THREE.Scene();

        // create a camera, which defines where we're looking at.
        // 四个参数分别代表了摄像机的视角、宽高比、近和远两个视截面。
        camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
        camControl = new THREE.TrackballControls(camera);
        // position and point the camera to the center of the scene
        camera.position.x = 35;
        camera.position.y = 20;
        camera.position.z = 15;
        camera.lookAt(scene.position);

        // create a render, sets the background color and the size
        renderer = new THREE.WebGLRenderer({antialias:true});
        renderer.setClearColor(0x000000, 1.0);
        renderer.setSize(window.innerWidth, window.innerHeight);
        //renderer.setSize('1000', '550');

        //地球
        var sphereGeometry = new THREE.SphereGeometry(7, 25, 25);
        var sphereMaterial = new THREE.MeshBasicMaterial();
        var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

        // position the sphere
        sphere.position.x = 0;
        sphere.position.y = 1;
        sphere.position.z = 0;
        sphere.name = 'sphere';
        sphere.castShadow = true;

        // add the sphere to the scene
        scene.add(sphere);

        var texture = new THREE.ImageUtils.loadTexture("http://10.1.26.29:84/earth.jpg");
        sphereMaterial.map = texture;

        // 添加一个转轴
        pivotPoint = new THREE.Object3D();
        pivotPoint.rotation.x = 0.4;
        sphere.add(pivotPoint);

        // create a cube and add to scene
        //月球
        var sphereGeometrysml = new THREE.SphereGeometry(2, 25, 25);
        var sphereMaterialsml = new THREE.MeshBasicMaterial();
        var spheresml = new THREE.Mesh(sphereGeometrysml, sphereMaterialsml);

        // position the sphere
        spheresml.position.x = 10;
        spheresml.position.y = -2;
        spheresml.position.z = -10;
        spheresml.name = 'spheresml';
        spheresml.castShadow = true;

        //注意这里转动的小球要添加在转轴里
        pivotPoint.add(spheresml);

        var texturesml = new THREE.ImageUtils.loadTexture("http://10.1.26.29:84/moon.jpg");
        sphereMaterialsml.map = texturesml;

        //星星
        var starsGeometry = new THREE.Geometry(); // an empty geometry
        for (var i = 0; i < 2000; i++) {
            // create a new vertex with random coordinates between -1 and 1
            var vertex = new THREE.Vector3();
            vertex.x = Math.random() * 2 - 1;
            vertex.y = Math.random() * 2 - 1;
            vertex.z = Math.random() * 2 - 1;
            //vertex.multiplyScalar(67);

            starsGeometry.vertices.push(vertex);
        }
        var starsMaterial = new THREE.ParticleBasicMaterial({
            color: Math.random() * 0xffffff,
            size: 2,
            sizeAttenuation: false
        });
        var stars = new THREE.ParticleSystem(starsGeometry, starsMaterial);
        stars.scale.set(300, 300, 300);
        stars.name = 'stars';
        scene.add(stars);

        //圆环
        var torusGeometry = new THREE.TorusGeometry(14.3,0.03,50,50);
        var torusMaterial = new THREE.MeshBasicMaterial({color:0xaaaaaa});
        var tours = new THREE.Mesh(torusGeometry,torusMaterial);
        tours.position.x = 0;
        tours.position.y = 0;
        tours.position.z = 0;
        tours.rotation.x = -20.6;
        tours.rotation.y = 0;
        tours.rotation.z = 0;
        tours.castShadow = true;
        tours.name = 'tours';
        pivotPoint.add(tours);


        //设置light
        light = new THREE.DirectionalLight(0xffffff, 1.0, 0);
        light.position.set( 200, 200, 200 );//设置光源向量
        light.shadowMapEnabled = true;
        light.shadowCameraNear = 20;
        light.shadowCameraFar = 100;
        scene.add(light);

        // add the output of the renderer to the html element
        document.getElementById('canvas3d').appendChild(renderer.domElement);


        control = new function (){
            this.rotationSpeedY = 0.01;
            this.sphereRotationSpeedY = 0.003;
            this.starRoitationSpeedZ = 0.001;
        }
        addControls(control);

        // call the render function
        render();
    }

    function addControls(controlObject){
        var gui = new dat.GUI();
        gui.add(controlObject,'rotationSpeedY',-0.1,0.1);
    }

    function render() {
        renderer.render(scene, camera);

        pivotPoint.rotation.y += control.rotationSpeedY;

        //scene.getObjectByName('sphere').rotation.y += control.rotationSpeedY;
        scene.getObjectByName('sphere').rotation.y += control.sphereRotationSpeedY;
        scene.getObjectByName('spheresml').rotation.y += control.sphereRotationSpeedY;
        scene.getObjectByName('stars').rotation.y += control.starRoitationSpeedZ;

        camControl.update();
        requestAnimationFrame(render);
    }

    // calls the init function when the window is done loading.
    window.onload = init;

</script>

</body>
</html>
